import React from 'react'
import { Button, DatePicker } from 'antd-mobile'
import './form2.css'

class Form2 extends React.Component {

  state = {
    date: '', // 日期
    time: '', // 时间
  }

  componentDidMount() {
    document.title = '填写项目信息'
  }
 
  // 选择日期回调
  onDateChange = (date) => {
    let y = date.getFullYear().toString()
    let m = (date.getMonth() + 1).toString()
    let d = date.getDate().toString()
    this.setState({
      date: y + '年' + m + '月' + d + '日'
    })
  }

  // 选择时间回调
  onTimeChange = (date) => {
    let h = date.getHours().toString()
    let m = date.getMinutes().toString()
    this.setState({
      time: h + '时' + m + '分'
    })
  }

  render() {
    let { date, time } = this.state
    return (
      <div className="_form2">
        <div className="main">
          <div className="item">
            <div className="item-box">
              <input className="item-input" type="text" placeholder="填写公司名称" />
            </div>
          </div>
          <DatePicker
            mode="date"
            title="Select Date"
            extra="Optional"
            onChange={ this.onDateChange }
          >
            <div className="item">
              <div className="item-box">
                <div className="item-left">
                  {
                    date ?
                    <div className="value">{ date }</div>
                    :
                    <div className="placeholder">设置竞拍开始日期</div>
                  }
                </div>
                <div className="item-right">
                  <img className="arrow" src="./images/form-right_arrow.png" alt=""/>
                </div>
              </div>
            </div>
          </DatePicker>
          <DatePicker
            mode="time"
            title="Select Date"
            extra="Optional"
            onChange={ this.onTimeChange }
          >
            <div className="item">
              <div className="item-box">
                <div className="item-left">
                  {
                    time ?
                    <div className="value">{ time }</div>
                    :
                    <div className="placeholder">设置竞拍开始时间</div>
                  }
                </div>
                <div className="item-right">
                  <img className="arrow" src="./images/form-right_arrow.png" alt=""/>
                </div>
              </div>
            </div>
          </DatePicker>
        </div>
        <div className="fixed_bottom">
          <Button className="submit" type="primary" size="large">创建项目</Button>
        </div>
      </div>
    )
  }

}

export default Form2